<template>
  <div class="content-left">
    <div class="left-mycard">
      <div class="mycard-img"></div>
      <!-- 头像 -->
      <div class="mycard-portrait">
        <div class="portrait-box">
          <img src="../assets/img/notlogin.jpg" alt="" />
          <span>路人甲</span>
        </div>
      </div>
      <!-- 计数 -->
      <div class="mycard-count">
        <p><span>文章</span><span>10</span></p>
        <p><span>浏览</span><span>10</span></p>
        <p><span>评论</span><span>10</span></p>
      </div>
      <!-- 链接 -->
      <div class="mycard-link">
        <span class="iconfont icon-weixin"></span>
        <span class="iconfont icon-QQ"></span>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
        .content-left {
      width: 20vw;
      height: 100%;
      background-color: #fff;
      overflow: hidden;
      border-radius: 10px;
      .left-mycard {
        // border: 1px solid #fff;
        .mycard-img {
          height: 120px;
          background-image: url("../assets/img/banner.jpg");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .mycard-portrait {
          width: 100%;
          height: 100px;
          position: relative;
          border: 1px solid red;
          .portrait-box {
            position: absolute;
            top: -50%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              transition: all 0.3s ease;
              width: 110px;
              height: 110px;
              border-radius: 50%;
              border: 4px solid rgba(255, 255, 255, 0.5);
            }
            img:hover {
              transform: scale(1.2) rotateZ(360deg);
            }
            span {
              padding-top: 10px;
              font-size: 24px;
              color: rgb(88, 88, 88);
            }
          }
        }
        .mycard-count {
          height: 60px;
          padding-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid blue;
          color: rgb(88, 88, 88);
          p {
            padding-right: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
        .mycard-link {
          padding: 10px;
          display: flex;
          justify-content: center;
          border: 1px solid green;
          span {
            font-size: 40px;
            color: rgb(114, 114, 114);
          }
        }
      }
    }
</style>